<script setup lang="ts">
import { computed } from 'vue';
import { useAppStore } from '@/store/modules/app';
import HeaderBanner from './modules/header-banner.vue';
import CardData from './modules/card-data.vue';
import InfoPanel from './modules/info-panel.vue';

const appStore = useAppStore();
</script>

<template>
  <div class="client-home-container min-h-screen bg-gray-50" style="background-color: var(--home-bg-color)">
    <HeaderBanner />
  </div>
</template>

<style scoped>
.client-home-container {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  /* 确保完全填充视口 */
  position: relative;
  /* 自定义背景色变量 */
  --home-bg-color: #f9fafb; /* 亮色模式 */
}

/* 暗黑主题背景色 */
:global(.dark) .client-home-container {
  --home-bg-color: #1c1c1c;
}

/* 重置可能的默认样式 */
:deep(*) {
  box-sizing: border-box;
}

/* 确保容器背景色过渡平滑 */
.client-home-container {
  transition: background-color 0.3s ease;
}

/* 针对不同屏幕尺寸的响应式调整 */
@media (max-width: 640px) {
  .client-home-container {
    padding: 0;
  }
}
</style> 